<template>
  <div class="register">
    <div class="title">
        注册页
    </div>
    <div class="block">
        <input type="text" v-model="formData.phone" placeholder="输入手机号">
    </div>
    <div class="block">
        <input type="password" v-model="formData.pass" placeholder="输入密码">
    </div>
    <div class="block">
        <input type="password" v-model="formData.checkpass" placeholder="输入确认密码">
    </div>
    <div class="block">
        <input type="button" value="注册" @click="register">
    </div>
 
  </div>
</template>

<script>
import { Toast } from 'vant';
import {user_register} from '../utils/api'
export default {
    data(){
        return{
            formData:{
                phone:'',
                pass:'',
                checkpass:''
            }
        }
    },
    methods:{
        register(){
            if(/^1[3|9]\d{9}$/.test(this.formData.phone)==false){
                Toast('输入合法手机号')
            }else if(!this.formData.pass||!this.formData.checkpass){
                Toast('请输入密码或确认密码')
            }else if(this.formData.pass !== this.formData.checkpass){
                Toast('两次密码不一致')
            }else{//验证通过
                //深拷贝fromData
                var newFromData = JSON.parse(JSON.stringify(this.formData));
                //删除对象中的checkpass属性
                delete newFromData.checkpass;

                //发起注册请求
                user_register(newFromData).then((res)=>{
                    if(res.data.code == 200){//注册成功
                        Toast.success('注册成功');
                        //跳转到登录页
                        this.$router.push('/login');
                    }else{
                        Toast.fail(res.data.msg);
                    }
                        
                })
            }
        }
    }
}
</script>

<style lang='scss' scoped> 
.register{
  margin: 50px 20px;
}
.register .title{
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}
.register .block{
  margin: 20px 0;
}
.register .block input{
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
</style>